<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLClient</title>
    <style>
        *{
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>员工查询</h1>
    <lable>请输入员工账号</lable>
    <input type="text" id="keyword">
    <button id="search" name="search" type="submit">查询</button>
    <br>
    <p id="searchResult"></p>
    <hr>
    <h1>添加员工</h1>
    <lable>请输入员工姓名</lable>
    <input type="text" id="staffName">
    <br>
    <lable>请输入员工编号</lable>
    <input type="text" id="staffNumber">
    <br>
    <lable>请输入员工性别</lable>
    <select name="staffSex" id="staffSex">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="不确定">不确定</option>
    </select>
    <br>
    <lable>请输入员工职位</lable>
    <input type="text" id="staffJob">
    <br>
    <button id="save" name="save" type="submit">保存</button>
    <p id="createResult"></p>

    <script>
        document.getElementById("search").onclick = function(){
            //发送Ajax查询请求并处理
            var request  =new XMLHttpRequest();
            request.open("GET","XMLServer.php?number="+document.getElementById("keyword").value);
            request.send();

            request.onreadystatechange = function () {
                if(request.readyState === 4){
                    if(request.status === 200){
                        document.getElementById("searchResult").innerHTML = request.responseText;
                    }else{
                        alert("发生错误："+request.status);
                    }
                }
            }
        }

        document.getElementById("save").onclick=function(){
            //发送ajax查询请求并处理
            var request=new XMLHttpRequest();
            request.open("POST","XMLServer.php");
            var data="name="+document.getElementById("staffName").value
                +"&number="+document.getElementById("staffNumber").value
                +"&sex="+document.getElementById("staffSex").value
                +"&job="+document.getElementById("staffJob").value;
            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            request.send(data);
            request.onreadystatechange=function(){
                if(request.readyState===4){
                    if(request.status===200){
                        document.getElementById("createResult").innerHTML=request.responseText;
                    }
                    else{
                        alert("发生错误:"+request.status);
                    }
                }
            }
        }
    </script>
</body>
</html>